{include file="public/header" /}
<script src="__SKIN__/js/layui/xm-select.js"></script>


<div class="layui-fluid">
    <div class="layui-card" >
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>流程模板</legend>
    </fieldset>
    <div class="layui-tab">
        <!--选项卡容器-->
        <ul class="layui-tab-title">
            <li class="layui-this">流程模板</li>
        </ul>
        <!--选项卡容器end-->
        <!--内容容器-->
        <div class="layui-tab-content">
            <!--第一项-->
            <div class="layui-tab-item layui-show">
                    <div id="extra">
                        <button type="button" data-method="addflow" class="layui-btn layui-btn-warm">创建流程模板</button>
                    </div>
                    <!--添加新工作流弹窗-->
                    <div>
                        <form class="layui-form" id="addaiteform" style="display:none">
                            <div class="layui-form-item">
                                <label class="layui-form-label">设置流程名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="设置流程名称" autocomplete="on" class="layui-input" id="name" style="width:100px">
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--添加新工作流弹窗end-->
                    <!--添加配置工作流弹窗-->
                    <div id="setflow" style="display:none">
                    </div>
                    <!--添加配置工作流弹窗end-->
                    <div class="demoTable" style="margin-top:1rem;margin-bottom:1rem">
                        搜索流程ID：
                        <div class="layui-inline">
                            <input class="layui-input" name="id" id="searchid" autocomplete="off">
                        </div>
                        搜索流程名：
                        <div class="layui-inline">
                            <input class="layui-input" name="name" id="searchname" autocomplete="off">
                        </div>
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>
                        <!--站点列表-->
                    <table class="layui-hide" lay-filter="sitelist" id="sitelist"></table>
                        <!--站点列表end-->

                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-xs"  lay-event="edits">修改</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="edit">配置</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
            <!--第一项end-->
        </div>
        <!--内容容器end-->
    </div>
</div>
<script>
    layui.use(['table','form', 'layer','element'], function(){
        var $ = layui.$
            ,table = layui.table
            ,form = layui.form;
        form.render();

        table.render({
            elem: '#sitelist'
            ,url:"{:url('Workflowajax/get_flow_list')}"
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id',title: 'ID', sort: true}
                ,{field:'name',title: '流程名称'}
                ,{field:'total',title: '节点数', sort: true}
                ,{field:'state',title: '当前状态'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{fixed: 'right',toolbar: '#bar', width:'10%'}
            ]]
            ,id: 'searchid'  //重载ID
            ,page: true
            ,limit: 5
            ,limits:[5,10,15,20,25]
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }, //头工具栏事件
        });
        //
        var $ = layui.$, active = {
            reload: function(){
                var searchid = $('#searchid');
                var searchname = $('#searchname');

                //执行重载
                table.reload('searchid', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: searchid.val(),
                            name: searchname.val(),
                        }
                    }
                }, 'data');
            }
        };
        //监听行工具事件
        table.on('tool(sitelist)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    let url = "{:url('Workflowajax/delete_flow')}";
                    let res = ajax(url,data);
                    if(res.code == 1){
                        obj.del();
                        table.reload('searchid');
                        layer.close(index);
                    }else if(res.code ==0){
                        layer.close(index);
                    }
                });
            } else if(obj.event === 'edit'){
                active.setflow(data.id);
            } else if(obj.event === 'edits'){
                active.editflow(data.id);
            }
        });

        //弹窗表单
        var active = {
            addflow:function(){
                var that = this;
                //多窗口模式，层叠置顶
                _this = layer.open({
                    type: 2//此处以iframe举例
                    ,title: '添加流程模板'
                    ,area: 'auto'
                    ,shade: 0
                    ,maxmin: true
                    ,offset: 'auto'
                    ,content: "{:url('workflowhome/add')}"     //$("#addaiteform")
                    ,btn: ['关闭']
                    , btn1: function (index, layero) {
                        layer.close(index);
                        return false;
                    },
                    end: function () {
                        table.reload('searchid');
                        return false;
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    }
                });
                layer.full(_this); //窗口直接顶天立地
            },
            setflow:function(id){ //配置流程模板

                _this = layer.open({
                    type: 2//此处以iframe举例
                    ,title: '设置流程模板'
                    ,area: 'auto'
                    ,shade: 0
                    ,maxmin: true
                    ,offset: 'auto'
                    ,content: "{:url('Workflowroval/index')}?id="+id
                    ,btn: [ '关闭']
                    ,btn1: function(index, layero){
                        layer.close(index);
                        return false;
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    }
                });
                layer.full(_this); //窗口直接顶天立地
            },
            editflow:function(id){ //配置流程模板

                _this = layer.open({
                    type: 2//此处以iframe举例
                    ,title: '设置流程模板'
                    ,area: 'auto'
                    ,shade: 0
                    ,maxmin: true
                    ,offset: 'auto'
                    ,content: "{:url('workflowhome/edit')}?id="+id
                    ,btn: [ '关闭']
                    ,btn1: function(index, layero){
                        layer.close(index);
                        return false;
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    }
                });
                layer.full(_this); //窗口直接顶天立地
            },
        };
        //弹窗表单按钮控制器
        $('#extra .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(data){
                arr = eval('(' + data + ')');
            }
        });
        return arr;
    }

</script>

</div>
</div>